<template>
  <div class="chat-container">
    <!-- 左侧：功能按钮 -->
    <div class="function-buttons">
      <h2 style="font-size: 32px">功能助手</h2>
      <button
          class="function-button"
          @click="selectFunction('cloze')"
      >
        完形填空助手
      </button>
      <button
          class="function-button"
          @click="selectFunction('reading')"
      >
        阅读理解助手
      </button>
      <button
          class="function-button"
          @click="selectFunction('translation')"
      >
        翻译助手
      </button>
      <button
          class="function-button"
          @click="selectFunction('writing')"
      >
        写作助手
      </button>
    </div>

    <!-- 右侧：对话框 -->
    <div class="chat-box">
      <h2 style="font-size: 32px">AI助教</h2>
      <div class="messages" ref="messageContainer">
        <div
            v-for="(message, index) in currentChat"
            :key="index"
            class="chat-bubble"
            :class="{
              'user-message': message.sender === 'user',
              'ai-message': message.sender === '助教',
              'system-message': message.sender === '系统'
            }"
        >
          <div class="message-content">
            <strong v-if="message.sender !== '系统'">{{ message.sender }}</strong>
            <p>{{ message.content }}</p>
          </div>
        </div>
      </div>

      <div class="input-area">
        <textarea
            v-model="userInput"
            placeholder="请输入您的问题..."
            class="message-input"
            @keyup.enter="sendMessage"
        ></textarea>
        <button @click="sendMessage" class="send-button">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
import { chat } from "@/api/job";

export default {
  name: 'ChatPage',
  data() {
    return {
      userInput: '',
      currentChat: [],
      selectedFunction: null,
      welcomeMessage: {
        title: "考研英语智能助教",
        content: `欢迎使用考研英语智能助教！我可以帮助你解决以下问题：

1. 完形填空：题目分类、同义替换分析、高频词识别
2. 阅读理解：主旨分析、长难句拆解、解题思路
3. 翻译：句子翻译、语法结构分析、翻译技巧
4. 写作：作文修改、结构优化、高级词汇替换

请点击左侧功能按钮开始使用，或直接输入你的问题。`
      },
      functionPrompts: {
        cloze: `现在你是一个考研英语完形填空助手，请用中文回答。我可以帮助你：

1. 题目分类：分析题目考察的语法点或逻辑关系
2. 同义替换：识别题目中考察的单词同义替换
3. 关键词句：找出影响全文理解的关键词和关键句
4. 高频词汇：标记文章和选项中的考研高频词
5. 难度分类：按照难易程度对题目进行分类
6. 易错题目：指出哪些题目容易出错及原因
7. 选项分析：解释特定题目为什么选择某个选项

请告诉我你需要哪方面的帮助？`,
        reading: `现在你是一个考研英语阅读理解助手，请用中文回答。我可以帮助你：

1. 主旨分析：概括文章的中心思想和写作目的
2. 观点态度：分析作者的观点和态度倾向
3. 文章结构：解析文章的段落结构和逻辑关系
4. 长难句分析：拆解复杂句子的语法结构
5. 高频词汇：标记文章中的考研高频词汇
6. 解题思路：提供题目的解题方法和思路
7. 答案分析：解释为什么选择某个答案

请告诉我你需要哪方面的帮助？`,
        translation: `现在你是一个考研英语翻译助手，请用中文回答。我可以帮助你：

1. 句子翻译：提供准确流畅的中文翻译
2. 语法分析：解析句子的语法结构
3. 难点解析：指出翻译中的难点和重点
4. 语序调整：优化翻译结果的语序和表达
5. 词义确定：分析词汇在上下文中的确切含义
6. 翻译技巧：分享实用的翻译技巧和方法

请告诉我你需要哪方面的帮助？`,
        writing: `现在你是一个考研英语写作助手，请用中文回答。我可以帮助你：

1. 作文修改：检查并修正语法和表达错误
2. 结构优化：改进文章的结构和逻辑连贯性
3. 词汇升级：替换普通词汇为高级词汇
4. 论点强化：增强论点的说服力和论证效果
5. 连贯性：改善段落和句子间的过渡衔接
6. 评分预估：评估作文可能的得分区间
7. 提升建议：提供针对性的改进建议

请告诉我你需要哪方面的帮助？`
      }
    }
  },
  created() {
    this.showWelcomeMessage();
  },
  methods: {
    showWelcomeMessage() {
      this.currentChat.push({
        sender: '系统',
        content: this.welcomeMessage.content
      });
    },

    async sendMessage() {
      if (!this.userInput.trim()) return;

      const userMessage = {
        sender: 'user',
        content: this.userInput
      };

      this.currentChat.push(userMessage);

      try {
        const response = await chat(this.userInput, {
          'Content-Type': 'application/json'
        });

        const aiMessage = {
          sender: '助教',
          content: response.data.response
        };

        this.currentChat.push(aiMessage);
      } catch (error) {
        console.error('API调用错误:', error.response?.data || error.message);

        const errorMessage = {
          sender: '助教',
          content: error.response?.data?.error || '抱歉，助教出差了，请稍后重试。'
        };

        this.currentChat.push(errorMessage);
      }

      this.userInput = '';
      this.scrollToBottom();
    },

    selectFunction(func) {
      this.selectedFunction = func;
      this.currentChat = []; // 切换功能时清空对话

      // 直接根据功能发送对应的提示
      const prompt = this.functionPrompts[func];

      // 自动发送给后端
      this.autoSendPrompt(prompt);

      this.scrollToBottom();
    },

    async autoSendPrompt(prompt) {
      try {
        const response = await chat(prompt, {
          'Content-Type': 'application/json'
        });

        const aiMessage = {
          sender: '助教',
          content: response.data.response
        };

        this.currentChat.push(aiMessage);
      } catch (error) {
        console.error('API调用错误:', error.response?.data || error.message);

        const errorMessage = {
          sender: '助教',
          content: error.response?.data?.error || '抱歉，助教出差了，请稍后重试。'
        };

        this.currentChat.push(errorMessage);
      }

      this.scrollToBottom();
    },

    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messageContainer;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    }
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  height: 80vh;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.function-buttons {
  width: 200px;
  padding: 20px;
  background-color: #f0f0f0;
  border-right: 1px solid #ddd;
  overflow-y: auto;
}

.function-buttons h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.function-button {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.function-button:hover {
  background-color: #45a049;
}

.chat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.chat-box h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fafafa;
}

.chat-bubble {
  margin-bottom: 15px;
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 85%;
  word-wrap: break-word;
  line-height: 1.5;
}

.user-message {
  background-color: #e3f2fd;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.ai-message {
  background-color: #f1f1f1;
  margin-right: auto;
  border-bottom-left-radius: 5px;
}

.system-message {
  background-color: #e8f5e9;
  margin: 0 auto;
  width: 90%;
  border-radius: 8px;
  text-align: center;
  padding: 15px;
  font-size: 15px;
  white-space: pre-line;
}

.input-area {
  display: flex;
  gap: 10px;
}

.message-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: none;
  height: 60px;
  font-size: 14px;
}

.send-button {
  padding: 0 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 60px;
  font-size: 16px;
}

.send-button:hover {
  background-color: #45a049;
}
</style>